import "braft-editor/dist/index.css";
import React from "react";
import BraftEditor from "braft-editor";

export default class Editor extends React.Component {
    state = {
        editorState: "", // 设置编辑器初始内容
        outputHTML: "<div></div>",
    };

    componentDidMount() {
        this.isLivinig = true;
    }

    componentWillUnmount() {
        this.isLivinig = false;
    }

    handleChange = (editorState) => {
        this.setState(
            {
                editorState: editorState,
                outputHTML: editorState.toHTML(),
            },
            () => {
                this.props.getHtml(this.state.outputHTML);
            }
        );
    };

  render() {
    // const { editorState, outputHTML } = this.state;
    const { editorState } = this.state;
    const controls = [
      // 自定义选项卡
      {
        key: "bold",
        text: <b>加粗</b>,
      },
      "italic",
      "underline",
      "separator",
      "link",
      "separator",
      "media",
    ];
    return (
      <div>
        <div className="editor-wrapper">
          <BraftEditor
            controls={controls}
            value={editorState}
            onChange={this.handleChange}
          />
        </div>
        {/* <h5>输出内容</h5>
        <div className="output-content">{outputHTML}</div> */}
            </div>
        );
    }
}
